<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="openDetail" width="960px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="物料编码" prop="itemCode">
              <el-input v-model="form.itemCode" readonly="readonly" maxlength="64" v-if="optType == 'view'" />
              <el-input v-model="form.itemCode" placeholder="请输入物料编码" maxlength="64" v-else />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item label-width="80">
              <el-switch
                v-model="autoGenFlag"
                active-color="#13ce66"
                active-text="自动生成"
                @change="handleAutoGenChange(autoGenFlag)"
                v-if="optType != 'view'"
              ></el-switch>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="旧物料编码" prop="jdyOldItemNumber">
              <el-input v-model="form.jdyOldItemNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料名称" prop="itemName">
              <el-input v-model="form.itemName" maxlength="255" readonly="readonly" v-if="optType == 'view'" />
              <el-input v-model="form.itemName" placeholder="请输入物料名称" maxlength="255" v-else />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="form.specification" maxlength="500" readonly="readonly" v-if="optType == 'view'" />
              <el-input v-model="form.specification" maxlength="500" v-else />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据状态" prop="attr1">
              <!-- <el-input
                v-model="form.attr1 == 'Z' ? '暂存': form.attr1 == 'A' ? '创建':form.attr1 == 'B'?'审核中':form.attr1 == 'C'?'已审核':form.attr1 == 'D'?'重新审核':'--'' "
                disabled
              />-->
              <!-- Z 暂存 A 创建 B 审核中 C 已审核 D 重新审核 -->
              <span>{{ form.attr1 == 'Z' ? '暂存' : form.attr1 == 'A' ? "创建" : form.attr1 == 'B' ? "审核中" : form.attr1 ==
                'C' ? "已审核" : form.attr1 == 'D' ? "重新审核" : "--" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="measureName">
              <el-select v-model="form.unitOfMeasure" disabled v-if="optType == 'view'">
                <el-option v-for="item in measureOptions" :key="item.jdyUnitId" :label="item.measureName" :value="item.jdyUnitId + ''" :disabled="item.enableFlag == 'N'"></el-option>
              </el-select>

              <el-select v-model="form.unitOfMeasure" placeholder="请选择单位" v-else>
                <el-option v-for="item in measureOptions" :key="item.jdyUnitId" :label="item.measureName" :value="item.jdyUnitId + ''" :disabled="item.enableFlag == 'N'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料/产品分类" prop="itemTypeId">
              <treeselect v-model="form.itemTypeId" :options="itemTypeOptions" :show-count="true" disabled v-if="optType == 'view'" />
              <treeselect v-model="form.itemTypeId" :options="itemTypeOptions" :show-count="true" placeholder="请选择所属分类" v-else :disable-branch-nodes="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否启用">
              <el-radio-group v-model="form.enableFlag" disabled v-if="optType == 'view'">
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
              <el-radio-group v-model="form.enableFlag" v-else>
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安全库存">
              <el-radio-group v-model="form.safeStockFlag" disabled v-if="optType == 'view'">
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>

              <el-radio-group v-model="form.safeStockFlag" v-else>
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次号管理">
              <el-radio-group disabled v-model="form.jdyIsSnManage">
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="来料检验">
              <el-radio-group disabled v-model="form.checkIncoming">
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="启用序列号">
              <el-radio-group disabled v-model="form.jdyIsBatchManage">
                <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="文件附件" prop="massUrl">
              <FileUpload :limit="8999" :value="form.jdyFile" :fileType="fileType" @input="handleFile1" @onRemoved="handleRemovedFile1">
              </FileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.safeStockFlag == 'Y'">
          <el-col :span="12">
            <el-form-item label="最小库存量">
              <el-input-number v-model="form.minStock" :percision="2" :step="1" disabled v-if="optType == 'view'" />
              <el-input-number v-model="form.minStock" :percision="2" :step="1" placeholder="请输入最小安全库存量" v-else />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大库存量">
              <el-input-number v-model="form.maxStock" :percision="2" :step="1" disabled v-if="optType == 'view'" />
              <el-input-number v-model="form.maxStock" :percision="2" :step="1" placeholder="请输入最大安全库存量" v-else />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="备注">
              <el-input v-model="form.remark" readonly v-if="optType == 'view'"></el-input>
              <el-input v-model="form.remark" placeholder="请输入内容" v-else></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label>
              <el-button type="primary" @click="submitForm">保存文件</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs type="border-card" v-if="form.jdyItemId != null">
        <!--        <el-tab-pane label="BOM组成">-->
        <!--          <ItemBom :optType="optType" :itemId="form.itemId"></ItemBom>-->
        <!--        </el-tab-pane>-->
        <!--        <el-tab-pane label="供应商"></el-tab-pane>-->
        <el-tab-pane label="替代品">
          <Substitute ref="substituteTab" :sourceJdyItemId="form.jdyItemId"></Substitute>
        </el-tab-pane>
        <!--        <el-tab-pane label="SIP"></el-tab-pane>-->
        <!--        <el-tab-pane label="SOP">-->
        <!--          <SOPTab :itemId="form.itemId" :optType="optType"></SOPTab>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel" v-if="optType == 'view'">返回</el-button>
        <el-button type="primary" @click="submitForm" v-else>确 定</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  mdItemList,
  getMdItem,
  delMdItem,
  addMdItem,
  updateMdItem
} from "@/api/mes/md/mdItem";
import { treeselect } from "@/api/mes/md/itemtype";
import FileUpload from "@/components/FileUpload/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import ItemBom from "./itembom.vue";
import Substitute from "./substitute";
export default {
  data() {
    return {
      openDetail: false,
      title: "查看物料/产品",
      // 表单参数
      form: {},
      row: {},
      loading: false,
      // 表单校验
      rules: {
        itemCode: [
          { required: true, message: "物料/产品编码不能为空", trigger: "blur" },
          {
            max: 64,
            message: "物料/产品编码长度必须小于64个字符",
            trigger: "blur"
          }
        ],
        itemName: [
          { required: true, message: "物料/产品名称不能为空", trigger: "blur" }
        ],
        unitOfMeasure: [
          { required: true, message: "单位不能为空", trigger: "blur" }
        ],
        itemTypeId: [
          { required: true, message: "物料分类不能为空", trigger: "blur" }
        ]
      },
      // 部门树选项
      itemTypeOptions: undefined,
      //弹框的操作类型 view add edit
      optType: undefined,
      // 部门名称
      itemTypeName: undefined,
      //自动生成物料编码标识
      autoGenFlag: false,
      // 日期范围
      dateRange: [],
      //单位列表
      measureOptions: [],
      treeData: [],
      // 文件类型
      fileType: [
        "doc",
        "docx",
        "xlsx",
        "xls",
        "ppt",
        "txt",
        "pdf",
        "png",
        "jpg",
        "jpeg"
      ],
      nameType: "",
    };
  },
  dicts: ["sys_yes_no", "mes_item_product"],
  components: { Treeselect, ItemBom, Substitute, FileUpload },
  methods: {
    //初始化函数
    init(row, type) {
      console.log(row, "子组件的row");
      this.row = row;
      this.nameType = type
      //调接口需要的id
      //   this.workorderId = row.workorderId;
      //   this.issueId = row.issueId;
      this.getTreeselect();
      this.getList();
    },
    getTreeselect() {
      treeselect().then(response => {
        this.treeData.push(response.data[0].id);
        this.treeData.push(response.data[1].id);
        this.itemTypeOptions = response.data;
      });
    },
    getList() {
      let itemId = this.row[`${this.nameType}`];
      if (!itemId) {
        itemId = this.row.itemId
      }
      getMdItem(itemId).then(response => {
        this.form = response.data;
        this.openDetail = true;
        this.title = "查看物料/产品";
        this.optType = "view";
      });
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workorderId: null,
        workorderCode: null,
        workorderName: null,
        orderSource: null,
        sourceCode: null,
        productId: null,
        productCode: null,
        productName: null,
        productSpc: null,
        unitOfMeasure: null,
        quantity: null,
        quantityProduced: null,
        quantityChanged: null,
        quantityScheduled: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        requestDate: null,
        parentId: null,
        status: 0,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        orderType: null,
        fPlanStartDate: null,
        fPlanFinishDate: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    },
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateMdItem(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            // this.openDetail = false;
            this.getList();
          });
        }

        // if (valid) {
        //   if (this.form.itemId != undefined) {
        //     updateMdItem(this.form).then(response => {
        //       this.$modal.msgSuccess("修改成功");
        //       this.openDetail = false;
        //       this.getList();
        //     });
        //   } else {
        //     // debugger;
        //     addMdItem(this.form).then(response => {
        //       this.$modal.msgSuccess("新增成功");
        //       this.openDetail = false;
        //       this.getList();
        //     });
        //   }
        // }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection, "selection");
      this.selectionList = selection;
      this.itemCodes = selection.map(item => item.itemCode);
    },
    handleFile1(url) {
      console.log(url);
      this.form.jdyFile = url;
      //   let obj = {
      //     type: 2,
      //     url
      //   };
      //   if (this.form.jdyFile) {
      //     this.form.jdyFile.push(obj);
      //   } else {
      //     this.form.jdyFile = [];
      //     this.form.jdyFile.push(obj);
      //   }
      // this.form.massUrl = url;
    },
    /* 删除附件 */
    handleRemovedFile1(url) {
      this.form.jdyFile = url;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}

.bg-purple {
  display: flex;
  align-items: center;

  span:nth-child(1) {
    display: inline-block;
    // width: 100px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 30px;
  }
}

.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
</style>